<template>
  <div class="dataShowReported">
    <div class="re-top">
      <div class="re-item">
        <span class="label">上报情况</span>
        <div class="item-tag">
          <span class="value">{{ submitCount }}/{{ totalCount }}</span>
        </div>
      </div>
      <div class="re-item">
        <span class="label">调查总进度</span>
      </div>
      <div class="re-item">
        <span class="label">调查总数据量</span>
        <div class="item-tag">
          <span class="value">{{ totalCount }}</span>
        </div>
      </div>
    </div>
    <div class="re-center">
      <h1 style="color: red">调查总进度=本级已上报/调查总数量注:调查总量=本级及下级数据总量;谁更新频率为实时更新</h1>
      <el-table
          :header-cell-style="{color: '#3a8f81',fontWeight: 'bold',border: 'none',fontSize: '15px'}"
          :cell-style="{ color: '#3a8f81',fontWeight: 'bold',border: 'none',fontSize: '15px' }"
          :data="tableData"
          style="width: 100%">
        <el-table-column
            align="center"
            prop="dataTypeName">
        </el-table-column>
        <el-table-column
            align="center"
            prop="carryCount"
            label="承灾体">
        </el-table-column>
        <el-table-column
            align="center"
            prop="reduceCount"
            label="减灾能力">
        </el-table-column>
      </el-table>
      <h1 style="color: red">注:审核通过:本级审核通过量;已上报:本级上报数量更新频率为每天5:00、22:00更新</h1>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Watch, InjectReactive} from 'vue-property-decorator';
import {queryWorkAreaStatistics, queryDataCountByState} from '@/api/dataShow';

@Component
export default class DataShowReported extends Vue {
  @InjectReactive() workId!: number
  @InjectReactive() areaId!: number
  submitCount: any = 0;
  totalCount: any = 0;
  tableData = [{
    dataTypeName: '数据总量',
    carryCount: '0',
    reduceCount: '0'
  }, {
    dataTypeName: '质检通过',
    carryCount: '0',
    reduceCount: '0'
  }, {
    dataTypeName: '审核通过',
    carryCount: '0',
    reduceCount: '0'
  }, {
    dataTypeName: '驳回数量',
    carryCount: '0',
    reduceCount: '0'
  }, {
    dataTypeName: '已上报',
    carryCount: '0',
    reduceCount: '0'
  }
  ]

  @Watch("areaId")
  areaChange(val) {
    this.queryDataStatistics()
    this.queryDataStateCount()
  }

  /**
   * 查询调查任务、区划的数据统计
   */
  queryDataStatistics() {
    queryWorkAreaStatistics({"workId": this.workId, "areaId": this.areaId}).then(res => {
      if (res && res.data) {
        this.submitCount = res.data.submitCount;
        this.totalCount = res.data.totalCount;
      }
    })
  }

  /**
   * 查询各状态数据统计
   */
  queryDataStateCount() {
    queryDataCountByState({"workId": this.workId, "areaId": this.areaId}).then(res => {
      if (res && res.data) {
        console.log(2, res.data)
        this.tableData = res.data
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.dataShowReported {
  padding: 12px;
  background: #ffffff;

  .re-top {
    display: flex;
    align-items: center;

    .re-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;

      .label {
        font-size: 15px;
        color: #3a8f81;
      }

      .item-tag {
        padding: 12px 24px;
        text-align: center;
        color: #3a8f81;
        font-size: 15px;
        font-weight: bold;
        background: #e9f3f2;
      }
    }
  }
}
</style>
